<template>
	<view class="course-header">
		<image class="img" src="/static/images/banner1.jpg"></image>
		<view class="header-info">
			<view class="price-info">
				<!-- 如果是免费课程就显示免费 -->
				<text v-if="course.isFree">免费</text>
				<!-- 如果不是就显示价格 -->
				<block v-else>
					<!-- 优惠价 -->
					<text v-if="true">￥{{course.priceDiscount}}</text>
					<!-- 原价 -->
					<text :class="{price:course.priceDiscount}">￥{{course.priceOriginal}}</text>
					<text v-if="true" class="youhui">优惠价</text>
				</block>
			</view>
			<view class="title">
				{{course.title}}
			</view>
			<view class="count">
				<text class="iconfont icon-haoping2">{{course.goodRate}}好评</text>
				<text class="iconfont icon-touxiang2">{{course.studyTotal}}w</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			course:{
				type:Object,
				default:()=>({
					"id":10,
					"title":"uni-app在线教育视频教程",
					"studyTotal":580,
					"goodRate":'100%',
					"mainImage":'https://hc-1309984019.cos.ap-nanjing.myqcloud.com/hc/images/banner2.jpg',
					"isFree":0,
					"priceOriginal":699.99 ,//原价
					"priceDiscount":599.99 //优惠价
				})
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.course-header{
		.img{
			width: 750rpx;
			height: 420rpx;
		}
		.header-info{
			padding: 25rpx;
			background-color: #fff;
			border: 1px solid $mxg-color-grey;
			border-left: 0;
			border-right: 0;
		}
		.price-info{
			text{
				margin-right: 15rpx;
				&:first-child{
					color: $mxg-text-color-red;
					font-size: 46rpx;
					font-weight: bold;
				}
			}
			.price{
				color: #b6bbbf;
				font-size: 30rpx;
				text-decoration: line-through; //删除线
			}
			.youhui{
				font-size: 20rpx;
				color: $mxg-text-color-red;
				border-radius: 10rpx;
				border: 1px solid $mxg-text-color-red;
				padding: 0 3rpx;
			}
		}
		
		.title{
			font-size: 35rpx;
			font-weight: bold;
			color: #1d1d1f;
			padding-left: 8rpx;
		}
		
		.count{
			padding: 15rpx 0;
			text{
				margin-right: 15rpx;
				font-size: 20rpx;
				color: #7d828f;
				background-color: $mxg-color-grey;
				padding: 15rpx;
				border-radius: 30rpx;
			}
		}
	}
</style>
